<template>
  <div class="app-container">
    <el-form ref="form" :model="form" label-width="80px">
      <el-form-item label="景点名称">
        <el-input v-model="form.title" placeholder="请填写景点名称"/>
      </el-form-item>
      <el-form-item label="景点地址">
        <el-input v-model="form.addr" placeholder="请填写景点地址"></el-input>
      </el-form-item>
      <el-form-item label="景点门票">
        <el-input
          type="number"
          v-model="form.price"
          placeholder="门票价格"
        ></el-input>
      </el-form-item>
     <el-form-item label="游玩时间">
        <el-input v-model="form.playTime" placeholder="请填写景点游玩时间(单位:小时)"></el-input>
      </el-form-item>
      <el-form-item label="开放时间-结束时间">
        <el-input v-model="form.openTime" placeholder="请填写景点开放时间(00:00-12:00)"></el-input>
      </el-form-item>
       <el-form-item label="历史文化">
          <el-input
            type="textarea"
            :rows="5"
            v-model="form.culture"
            placeholder="请填写景点文化"
          />
      </el-form-item>
      <el-form-item label="历史故事">
          <el-input
            type="textarea"
            :rows="5"
            placeholder="请填写景点历史"
            v-model="form.history"
          />
      </el-form-item>
      <el-form-item label="简介">
          <el-input
            type="textarea"
            :rows="5"
            placeholder="请填写景点简介"
            v-model="form.descript"
          />
      </el-form-item>
      <el-form-item label="状态">
        <el-select v-model="selectString" value-key="id" @change="changeValue">
          <el-option
            v-for="item in selectArr"
            :label="item.name"
            :key="item.id"
            :value="item"
          ></el-option>
        </el-select>
      </el-form-item>
      <!-- TODO 景点图片 -->
      <el-form-item>
        <el-button type="primary" @click="onSubmit">立即修改</el-button>
        <el-button>取消</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import scenic from '@/api/travel/scenic/scenic'

export default {
    
  data() {
    return {
      selectString: "请选择",
      selectArr: [
        { id: 1, name: "正常" },
        { id: 2, name: "停用" },
        { id: 3, name: "删除" }
      ],
      form: {
        title: "",
        addr: "",
        price: null,
        playTime: "",
        openTime: "",
        culture: "",
        history: "",
        descript: "",
        status: 0
      },
    };
  },
  create() {
  },
  methods: {
    onSubmit() {
      console.log("submit!");
      scenic.updateScenicSpot(this.form).then(response =>{
        //提示成功
        this.$message({
                type: 'success',
                message: '增加景点信息成功!'
        });
        //跳转回首页
        this.$router.push({path:'/scenic/list/'})
      })
    },
    //修改下拉选择
    changeValue(value) {
      console.log(value);
      console.log(this.selectString);
      this.form.status = value.id;
      console.log(this.searchScenic);
    },
  },
};
</script>